UI Development with Chakra UI Vue — Accordions

Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.

In this article, we’ll look at how to get started with UI development with Chakra UI Vue.

Accordions

Chakra UI Vue comes with an accordion component.

To use it, we can write:

<template>
  <c-accordion>
    <c-accordion-item>
      <c-accordion-header>
        <c-box flex="1" text-align="left"> Section 1 title </c-box>
        <c-accordion-icon />
      </c-accordion-header>
      <c-accordion-panel pb="4"> Lorem ipsum 1 </c-accordion-panel>
    </c-accordion-item>
    <c-accordion-item>
      <c-accordion-header>
        <c-box flex="1" text-align="left"> Section 2 title </c-box>
        <c-accordion-icon />
      </c-accordion-header>
      <c-accordion-panel pb="4"> Lorem ipsum 1 </c-accordion-panel>
    </c-accordion-item>
  </c-accordion>
</template>

<script>
import {
  CBox,
  CAccordion,
  CAccordionItem,
  CAccordionHeader,
  CAccordionPanel,
  CAccordionIcon,
} from "@chakra-ui/vue";
export default {
  name: "App",
  components: {
    CBox,
    CAccordion,
    CAccordionItem,
    CAccordionHeader,
    CAccordionPanel,
    CAccordionIcon,
  },
};
</script>

We register the CAccordion, CAccordionItem, CAccordionHeader, CAccordionPanel, and CAccordionIcon components to register the components that form the accordion.

CAccordion is the main container.

CAccordionItem is the item container.

CAccordionHeader is the item header.

CAccordionPanel is the item content container.

And CAccordionIcon is the icon for the header.

We can put a CBox inside it to house the content we want.

We can add the allow-multiple prop to let us open multiple accordion items at once:

<template>
  <c-accordion allow-multiple>
    <c-accordion-item>
      <c-accordion-header>
        <c-box flex="1" text-align="left"> Section 1 title </c-box>
        <c-accordion-icon />
      </c-accordion-header>
      <c-accordion-panel pb="4"> Lorem ipsum 1 </c-accordion-panel>
    </c-accordion-item>
    <c-accordion-item>
      <c-accordion-header>
        <c-box flex="1" text-align="left"> Section 2 title </c-box>
        <c-accordion-icon />
      </c-accordion-header>
      <c-accordion-panel pb="4"> Lorem ipsum 1 </c-accordion-panel>
    </c-accordion-item>
  </c-accordion>
</template>

<script>
import {
  CBox,
  CAccordion,
  CAccordionItem,
  CAccordionHeader,
  CAccordionPanel,
  CAccordionIcon,
} from "@chakra-ui/vue";
export default {
  name: "App",
  components: {
    CBox,
    CAccordion,
    CAccordionItem,
    CAccordionHeader,
    CAccordionPanel,
    CAccordionIcon,
  },
};
</script>

Also, we can set the styles for the header when the accordion item is expanded with the _expanded prop:

<template>
  <c-accordion>
    <c-accordion-item>
      <c-accordion-header :_expanded="{ bg: 'tomato', color: 'white' }">
        <c-box flex="1" text-align="left"> Section 1 title </c-box>
        <c-accordion-icon />
      </c-accordion-header>
      <c-accordion-panel pb="4"> Lorem ipsum 1 </c-accordion-panel>
    </c-accordion-item>
    <c-accordion-item>
      <c-accordion-header>
        <c-box flex="1" text-align="left"> Section 2 title </c-box>
        <c-accordion-icon />
      </c-accordion-header>
      <c-accordion-panel pb="4"> Lorem ipsum 1 </c-accordion-panel>
    </c-accordion-item>
  </c-accordion>
</template>

<script>
import {
  CBox,
  CAccordion,
  CAccordionItem,
  CAccordionHeader,
  CAccordionPanel,
  CAccordionIcon,
} from "@chakra-ui/vue";
export default {
  name: "App",
  components: {
    CBox,
    CAccordion,
    CAccordionItem,
    CAccordionHeader,
    CAccordionPanel,
    CAccordionIcon,
  },
};
</script>

bg is the background color and color is the text color.

The styles will be applied when the item is expanded.

We can get the expanded state of an item with the isExpanded slot prop:

<template>
  <c-accordion allow-toggle>
    <c-accordion-item v-slot="{ isExpanded }">
      <c-accordion-header>
        <c-box flex="1" text-align="left"> Section 1 title </c-box>
        <c-accordion-icon :name="isExpanded ? 'minus' : 'add'" />
      </c-accordion-header>
      <c-accordion-panel pb="4"> Lorem ipsum 1 </c-accordion-panel>
    </c-accordion-item>
    <c-accordion-item>
      <c-accordion-header>
        <c-box flex="1" text-align="left"> Section 2 title </c-box>
        <c-accordion-icon />
      </c-accordion-header>
      <c-accordion-panel pb="4"> Lorem ipsum 2 </c-accordion-panel>
    </c-accordion-item>
  </c-accordion>
</template>

<script>
import {
  CBox,
  CAccordion,
  CAccordionItem,
  CAccordionHeader,
  CAccordionPanel,
  CAccordionIcon,
} from "@chakra-ui/vue";
export default {
  name: "App",
  components: {
    CBox,
    CAccordion,
    CAccordionItem,
    CAccordionHeader,
    CAccordionPanel,
    CAccordionIcon,
  },
};
</script>

In the example above, we use it to set the c-accordion-icon ‘s name prop.

Conclusion

We can add accordions easily into our Vue app with Chakra UI Vue.